<template>
    <div class="mind-easy-map-widget">
        <div class="mind-map-gragh" id="container-wrapper">
            
        </div>
    </div>
</template>

<script setup>
import { BruceMindMap } from "./tools/bruce-map";

const brucemap = ref(null)
const nodeList = ref([
    {id: 'vuejs', node: { label: "Vue3 JS",  width: 144, height: 60, isExpanded: true } },
    {id: 'piniajs', node: { label: "Pinia JS",  width: 144, height: 60, isExpanded: true } },
    {id: 'routerjs', node: { label: "Router JS",  width: 144, height: 60, isExpanded: true } },
    {id: 'raphael', node: { label: "Raphael", width: 160, height: 60, isExpanded: true } },
    {id: 'svggraph', node: { label: "SVG Graph", width: 120, height: 60, isExpanded: true } },
    {id: 'svgpanzoom', node: { label: "SvgPanZoom", width: 140, height: 60, isExpanded: true } },
    {id: 'dagrejs', node: { label: "Dagrejs", width: 168, height: 60, isExpanded: true } },
    {id: 'graphlib', node: { label: "Graphlib", width: 144, height: 60, isExpanded: true } },
    {id: 'roots', node: { label: "Bruce Map", width: 121, height: 60, isExpanded: true }}
])
const edgeList = ref([
    { sourceId: 'piniajs', targetId: 'vuejs'},
    { sourceId: 'routerjs', targetId: 'vuejs'},
    { sourceId: 'vuejs', targetId: 'raphael'},
    { sourceId: 'raphael', targetId: 'roots'},
    { sourceId: 'svggraph', targetId: 'roots' },
    { sourceId: 'svgpanzoom', targetId: 'svggraph' },
    { sourceId: 'dagrejs', targetId: 'graphlib'},
    { sourceId: 'graphlib', targetId: 'roots' },
])

nextTick(() => {
    brucemap.value = new BruceMindMap(
        "#container-wrapper",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL',
            compound: false,
            multigraph: true
        }
    )
})

onBeforeUnmount(() => {
    brucemap.value && brucemap.value.destroy()
})
</script>

<style lang="scss" src="./style.scss"></style>